<template>
  <div class="payment">
    <nav-bar>
      <div class="center" slot="center">在线支付</div>
    </nav-bar>
    <section class="count-down">
      <p class="title">支付剩余时间</p>
      <p class="time">
        <span class="hours">{{ hours }}</span> :
        <span class="minute">{{ minute | zeroComplement }}</span> :
        <span class="second">{{ second | zeroComplement }}</span>
      </p>
    </section>
    <section class="method">
      <p class="title">选择支付方式</p>
      <div class="method-1">
        <div class="left">
          <img src="~assets/img/profile/zhifubao.png" alt="" />
          <span>支付宝</span>
        </div>
        <div class="right" @click="handleSwitchPaymentMethod(0)">
          <svg
            class="svg"
            :style="{
              backgroundColor: currentIndex === 0 ? '#45c144' : '#cccccc',
            }"
          >
            <use xlink:href="#check-mark" />
          </svg>
        </div>
      </div>
      <div class="method-2">
        <div class="left">
          <svg class="svg">
            <use xlink:href="#wechat" />
          </svg>
          <span>微信</span>
        </div>
        <div class="right" @click="handleSwitchPaymentMethod(1)">
          <svg
            class="svg"
            :style="{
              backgroundColor: currentIndex === 1 ? '#45c144' : '#cccccc',
            }"
          >
            <use xlink:href="#check-mark" />
          </svg>
        </div>
      </div>
    </section>
    <input
      type="button"
      value="确认支付"
      class="button"
      @click="handleConfirmPayment"
    />
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
export default {
  data() {
    return {
      hours: "00",
      minute: 15,
      second: "00",
      timer: null,
      currentIndex: 0,
    };
  },
  watch: {
    second() {
      if (!Number(this.hours) && !Number(this.minute) && !Number(this.second)) {
        clearInterval(this.timer);
        this.$toast.handleTipsText("支付超时");
      }
    },
  },
  filters: {
    zeroComplement(value) {
      if (typeof value === "number") {
        return value / 10 < 1 ? "0" + value : value;
      } else {
        return "00";
      }
    },
  },
  created() {
    // if (this.second === "00") {
    //   this.timer = setInterval(() => {
    //     this.second--;
    //     console.log(this.second);
    //     if (this.second === -1) {
    //       this.minute--;
    //       this.second = 59;
    //     }
    //   }, 1000);
    // }
    // this.$toast.handleTipsText('暂不开放支付功能')
  },
  activated() {
    (this.hours = "00"), (this.minute = 15), (this.second = "00");
    if (this.second === "00") {
      this.timer = setInterval(() => {
        this.second--;
        if (this.second === -1) {
          this.minute--;
          this.second = 59;
        }
      }, 1000);
    }
    this.$toast.handleTipsText("暂不开放支付功能");
  },
  deactivated() {
    clearInterval(this.timer);
  },
  mounted() {
    this.$bus.$on("handlePopupConfirm", () => {
      this.$router.push("/order");
    });
  },
  methods: {
    handleSwitchPaymentMethod(index) {
      this.currentIndex = index;
    },
    handleConfirmPayment() {
      this.$toast.handleTipsText("当前环境无法支付，请打开官方APP进行付款");
    },
  },
  components: {
    NavBar,
  },
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.payment {
  .initial-children();
  width: 100%;
  background-color: #f1f1f1;
  .count-down {
    padding: 40px;
    text-align: center;
    background-color: #fff;
    font-size: 15px;
    .time {
      margin-top: 10px;
      font-size: 35px;
      color: #333333;
    }
  }
  .method {
    .title {
      padding: 10px 20px;
    }
    .method-1,
    .method-2 {
      .set-flex();
      padding: 15px 20px;
      border-bottom: 1px solid #f1f1f1;
      background-color: #fff;
    }
    .left {
      img,
      .svg {
        width: 50px;
        border-radius: 50%;
        margin-right: 10px;
        vertical-align: middle;
      }
    }
    .left {
      .svg {
        height: 50px;
        padding: 10px;
        background-color: #4cd964;
      }
    }
    .right {
      .svg {
        .check-mark();
      }
    }
  }
  .button {
    .determine();
    width: 90%;
  }
}
</style>